import { CSSProperties, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'

const StyleDiv = styled.div`
  display: flex;
  flex-direction: column;
  min-width: 50px;
  overflow: hidden;
  overflow-y: auto;
  .item {
    min-height: 70px;
    transition: 0.35s;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 14px 0;
    font-size: 12px;
    /* border-radius: 0px 10px 10px 0px; */
    &:hover,
    &.active {
      background: var(--semi-color-primary);
      color: var(--semi-color-white);
    }
    .name {
      /* margin-top: 5px; */
    }
    .icon {
      display: flex;
      align-items: center;
      font-size: 20px;
    }
    .semi-icon-default {
      font-size: inherit;
    }
  }
`
interface Props {
  children?: ReactNode
  data: any
  mode?: 'horizontal' | 'vertical'
  style?: CSSProperties
  className?: string
  itemFontSize?: number | string
  itemPadding?: number | string
  onTapClick?: (item: any, index: number) => void
  activeKey?: string
  indexKey: string
  isCursor?: Boolean
  isLang?: Boolean
}
const MenuTabs = ({ children, ...props }: Props): ReactNode => {
  const { t, i18n } = useTranslation()
  const isDark = useCommonStore((state) => state.isDark)
  const [active, setActive] = useState<any>(0)

  useEffect(() => {
    if (props.data.length > 0) {
      setActive(props.data[0][props.indexKey])
    }
  }, [props.data])

  useEffect(() => {
    if (props.activeKey) {
      setActive(props.activeKey)
    }
  }, [props.activeKey])

  const ClickEvt = (item: any, index: any) => {
    setActive(item[props.indexKey])
    props.onTapClick && props.onTapClick(item, index)
  }
  return (
    <StyleDiv
      style={{ color: `${isDark ? 'rgba(255,255,255,.6)' : 'rgba(0,0,0,.6)'}`, ...props.style }}
      className={props.className + ` scroll-nowidth`}
    >
      {props.data.map((item: any, index: any) => {
        if (!item.name) return
        return (
          <div
            key={index}
            className={`item ${active != item[props.indexKey] || 'active'} ${props.mode == 'horizontal' ? 'flex-row' : 'flex-col'}`}
            style={{
              fontSize: props.itemFontSize,
              padding: props.itemPadding,
              cursor: props.isCursor ? 'pointer' : 'default',
            }}
            onClick={() => ClickEvt(item, index)}
          >
            {item.Icon && <div className="icon">{item.Icon}</div>}
            <div className={`name pt-2`}>{props.isLang ? t(item.name) : item.name}</div>
          </div>
        )
      })}
    </StyleDiv>
  )
}

export default MenuTabs
